<template>
  <!-- 7迈车全球洗车 -->
  <view class="conent">
    <u-toast ref="uToast" />
    <!-- 顶部导航栏 -->
    <u-navbar back-icon-name="home" back-icon-size="40" title="7迈车洗车" :custom-back="navBack"></u-navbar>
    <!-- 提示弹框 -->
    <u-modal v-model="showmodalts" content="您确认离开吗？如果离开将无法回到此页面。" :show-confirm-button="true" :show-cancel-button="true"
      confirm-text="是" cancel-text="否" @confirm="showmoClickts"></u-modal>
    <!-- 背景 -->
    <view class="bacg">
      <!-- <image src="https://files.yzsheng.com/client/imgs/carwash_globalche/bg2.jpg" mode=""></image> -->
    </view>
    <view class="tops">
      <image src="https://files.yzsheng.com/client/imgs/top@2x.png" mode=""></image>
    </view>
    <view class="logo">
      <image src="https://files.yzsheng.com/client/imgs/logo@2x.png" mode=""></image>
    </view>
    <view class="maiche">
      <image src="https://files.yzsheng.com/client/imgs/7maiche@2x.png" mode=""></image>
    </view>
    <view class="hqcds">
      <view class="huanq">环球中心可以洗车！美容！保养啦！</view>
      <view class="guanai">关爱车，更关爱你</view>
    </view>
    <view class="huanqiu">
      <image src="https://files.yzsheng.com/client/imgs/huanqiu@2x.png" mode=""></image>
    </view>
    <view class="gouka">
      <view class="goukaone flex flex-ai-c flex-jc-c">
        <view class="anniu"></view>
        <view class="gouname">
          购卡洗车仅需 <text>20</text>元/次
        </view>
      </view>
    </view>
    <view class="gouka">
      <view class="goukaone flex flex-ai-c flex-jc-c" style="margin-left: -26rpx;">
        <view class="anniu"></view>
        <view class="gouname">
          自助洗车全年  <text>免费</text>
        </view>
      </view>
    </view>
    <view class="tipb">
      <!-- 滚动 -->
      <view class="rolling">
        <image src="https://files.yzsheng.com/client/imgs/carwash_globalche/gundong.png"></image>
        <view class="rollname">
          <u-notice-bar :list="list" bg-color="0" :volume-icon="true" color="#F30000" font-size="20" mode="horizontal"
            :is-circular="false" speed="380" padding="15rpx 20rpx"></u-notice-bar>
        </view>
      </view>
      <!-- 卡片1 -->
      <view class="card" @click="cardClick(1)">
        <view class="cardone">
          <image src="https://files.yzsheng.com/client/imgs/ka@2x.png"></image>
        </view>
        <view class="c_money flex flex-ai-fe flex-jc-sb">
          <view class="flex flex-ai-fe">
            <view class="cm_one">年卡会员：</view>
            <view class="cm_two">￥{{cardOne.normal_Price}}</view>
            <view class="cm_there">￥{{cardOne.sale_Price}}</view>
          </view>
          <view class="cm_four">一次办理，全年免费洗车</view>
        </view>
      </view>
      <!-- 卡片2 -->
      <view class="card" @click="cardClick(2)">
        <view class="cardone">
          <image src="https://files.yzsheng.com/client/imgs/ka@2x.png"></image>
        </view>
        <view class="c_money flex flex-ai-fe flex-jc-sb">
          <view class="flex flex-ai-fe">
            <view class="cm_one">年卡会员：</view>
            <view class="cm_two">￥{{cardTwo.normal_Price}}</view>
            <view class="cm_there">￥{{cardTwo.sale_Price}}</view>
          </view>
          <view class="cm_four">一次办理，730天免费洗车</view>
        </view>
      </view>
      <view class="threebox flex flex-ai-c flex-jc-c">
        <view class="trbimg">
          <image src="https://files.yzsheng.com/client/imgs/icon1@2x.png"></image>
        </view>
        <view class="trbname">
          <view class="">
            全国洗车点通用
          </view>
          <view class="trbone">
            大平台有保障，一次购买，全国通用
          </view>
        </view>
      </view>
      <view class="threebox flex flex-ai-c flex-jc-c">
        <view class="trbimg">
          <image src="https://files.yzsheng.com/client/imgs/icon2@2x.png"></image>
        </view>
        <view class="trbname">
          <view class="">
            机器故障保险
          </view>
          <view class="trbone">
            如果遇到机器故障无法洗车，则无条件补偿当次消耗
          </view>
        </view>
      </view>
      <view class="threebox flex flex-ai-c flex-jc-c">
        <view class="trbimg">
          <image src="https://files.yzsheng.com/client/imgs/icon3@2x.png"></image>
        </view>
        <view class="trbname">
          <view class="">
            保养/美容/维修尽享折扣
          </view>
          <view class="trbone">
            官方不定期将有礼券相送，享受保养/美容/维修等减免
          </view>
        </view>
      </view>
      <view class="" style="height: 30rpx;"></view>
      <!-- 洗车券 - 丁 -->
      <view v-if="carwashcoupons" class="new">
        <view>
          <view>
            <image src="https://files.yzsheng.com/client/index/carwashcoupons/carwashcoupons.png" style="width: 612rpx; height: 792rpx"></image>
          </view>
          <view style="
              position: absolute;
              bottom: 130rpx;
              width: 100%;
              margin-left: 27rpx;
            ">
            <view class="ljly" @click="CouponfreeClick">领券免费洗车</view>
          </view>
        </view>
        <view @click="carwashcouponsClick" style="margin-left: 27rpx">
          <image src="https://files.yzsheng.com/client/index/carMaintenance/guanbi.png" style="width: 50rpx; height: 50rpx"></image>
        </view>
      </view>
      <view :class="['mask', carwashcoupons ? 'mask-show' : 'mask-hide']" @touchstart="carwashcouponsClick()"></view>
      <u-popup v-model="isShow" mode="center" border-radius="20">
        <view style="width: 600rpx; text-align: center">
          <view style="padding-top: 54rpx; font-weight: bold; font-size: 34rpx">温馨提示</view>
          <view style="font-size: 28rpx; padding: 30rpx 0">
            <view>
              <view>该券仅限于环球中心洗车站使用，洗</view>
              <view>车站地址：环球中心W5区B2;</view>
            </view>
            <view style="font-weight: bold">
              <view>从W区5号入口进B2 — 第一个T字口右</view>
              <view>转 — 到达7迈车西车站</view>
            </view>
          </view>
          <view>
            <image src="https://files.yzsheng.com/client/selfwash/details/map.jpg" style="width: 480rpx; height: 290rpx; border-radius: 10rpx"
              mode="aspectFill" @click="previewImage"></image>
          </view>
          <view style="line-height: 60rpx; color: #333333">如需帮助请咨询</view>
          <view style="color: #0076ff; margin-bottom: 30rpx" @click="phone">{{
            serviceNumber.number
          }}</view>
          <view style="
              color: #0076ff;
              line-height: 80rpx;
              border-top: 2rpx solid #eeeeee;
            "
            @click="onScanClick">知道了
          </view>
        </view>
      </u-popup>
      <u-modal v-model="showmodal" content="您确定要退出吗？该优惠退出后将不能找回！" :show-confirm-button="true" :show-cancel-button="true"
        confirm-text="是" cancel-text="否" @confirm="showmoClick"></u-modal>
      <u-modal v-model="cardcoupon" content="领取成功，您可以到我的卡券查看" :show-confirm-button="true" :show-cancel-button="true"
        confirm-text="确定" cancel-text="去查看" @confirm="carcancelClick" @cancel="qxcarCancel"></u-modal>
      <u-modal v-model="gongxini" content="您已领取过该卡券，仅限领取一次。" :show-confirm-button="true" :show-cancel-button="true"
        confirm-text="我知道了" cancel-text="去查看" @confirm="IKnow" @cancel="qxcarCancel"></u-modal>
      <u-modal v-model="show" :content="content" title="说明" confirm-text="朕知道了" :title-style="titlestyle"></u-modal>
      
    </view>
  </view>
</template>

<script src="./carwash_globalche.js"></script>

<style lang="scss" scoped>
  @import "./carwash_globalche.scss";
</style>
